<template>
  <div id="app">
    <div class="container">
      <div
        class="item"
        v-for="item in listDate"
        :key="item.id"
        @click="goToDetail(item.url)"
      >
        <span class="title">{{ item.title }}</span>
        <span class="date">{{ item.publishDate }}</span>
      </div>
    </div>
  </div>
</template>

<script>
// import Login from "@/pages/login.vue";
// import Register from "@/pages/register.vue";
import { getList } from "@/apis/common.js";
export default {
  // components: { Login,Register },
  data() {
    return {
      // listDate: [
      //   {
      //     title: "关于公司及全资子公司申请授信并提供担保的公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "第五届监事会第二十一次会议决议公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "关于公司及全资子公司申请授信并提供担保的公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "第五届监事会第二十一次会议决议公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "关于公司及全资子公司申请授信并提供担保的公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "第五届监事会第二十一次会议决议公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "关于公司及全资子公司申请授信并提供担保的公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "第五届监事会第二十一次会议决议公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "关于公司及全资子公司申请授信并提供担保的公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "第五届监事会第二十一次会议决议公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "关于公司及全资子公司申请授信并提供担保的公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      //   {
      //     title: "第五届监事会第二十一次会议决议公告",
      //     url: "https://www.baidu.com",
      //     date: "2024-09-11",
      //   },
      // ],
      // 
      // 列表数据
      listDate:[]
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    // 点击跳转
    goToDetail(url) {
      console.log("url", url);
      // window.open(url, "_blank");
      window.open("/seeyon/userModule/sportalHtml/index.html", "_blank");
    },
    // 页面初始获取数据
    async getData() {
      await getList({page: 1, size: 10}).then((res) => {
        console.log("公告栏目数据:", res);
        if (res.code == 200) {
          var newData = []
          res.data.forEach((item) => {
            item.publishDate = this.timestampToDate( + item.publishDate);
            newData.push(item);
          })
          this.listDate = newData;
          console.log("listDate", this.listDate);
        }
      });
    },
    // 时间戳转日期
    timestampToDate(timestampInSeconds) {
      // 转换为毫秒
      const timestampInMilliseconds = timestampInSeconds;
      const date = new Date(timestampInMilliseconds);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>

<style>
@import "./style/index.css";
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  width: 8px; /* 设置滚动条的宽度 */
  height: 8px;
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条轨道的背景色 */
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 设置滚动条滑块的背景色 */
  border-radius: 8px; /* 设置滚动条滑块的圆角 */
}

/* 鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* 设置鼠标悬停时滚动条滑块的背景色 */
}
</style>
<style scoped>
#app {
  width: 100%;
  height: 440px;
  /* border: 1px solid #ccc; */
  margin: 0 auto;
  position: relative;
}
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.item {
  width: 100%;
  height: 40px;
  line-height: 30px;
  padding: 5px;
  box-sizing: border-box;
  font-size: 16px;
  border-bottom: 1px solid hsla(0, 0%, 60%, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.title {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #333;
}
.title:hover {
  color: blue;
}
.date {
  width: max-content;
}
</style>
